<template>
    <div class="fold-text" :class="{ isOverflow: isOverflow && !isUnfold, isUnfold: isUnfold }" ref="foldtext">
        <div class="fold-text-content" v-html="content">
        </div>
        <a v-if="isOverflow && !isUnfold" @click="unfold()">展开</a>
    </div>
</template>

<script>
/**
 * 标签集组件
 * 传入数据 data
 * {
        titel: "部门筛选",
        styleType: "A", A:蓝色标签 B 灰色标签
        labels: 標簽列表 [{ name: "標簽名",}]
    }
 */
export default {
    name: "fold-text",
    props: {
        content: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            isOverflow: false,
            isUnfold: false,
        };
    },
    watch: {
        content() {
            this.init();
        },
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.$nextTick(() => {
                const foldtext = this.$refs.foldtext;
                if (foldtext.clientHeight*2 <= foldtext.scrollHeight) {
                    this.isOverflow = true;
                }
            });
        },
        unfold() {
            this.isUnfold = true;
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.fold-text {
    height: 36px;
    line-height: 36px;
    display: flex;
    width: 100%;
    > a {
        height: 36px;
        line-height: 36px;
        flex-shrink: 0;
        font-size: 26px;
        color: #576b95;
    }
    &.isUnfold {
        height: auto;
        display: block;
    }
    &.isOverflow {
        .fold-text-content {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
.fold-text-content {
    font-size: 28px;
    line-height: 42px;
    color: #000;
    height: auto;
    flex: 1;
}
</style>
